﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<body>
<div id="app">
		<table width="100%">
			<tr>
				<td>
					<p color="black">您正在做的业务是:人力资源--客户化设置--人力资源档案管理设置--I级机构设置</p>
				</td>
			</tr>
			</table>
	<el-button plain v-on:click="Add()">新增</el-button>
	<el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#FFDB6F',color:'#606266'}" >
		<el-table-column prop="firstKindId" label="I级机构编号" width="250"></el-table-column>
		<el-table-column prop="firstKindName" label="I级机构名称" width="250"></el-table-column>
		<el-table-column prop="firstKindSalaryId" label="薪酬发放责任人编号" width="250"></el-table-column>
		<el-table-column prop="firstKindSaleId" label="销售责任人编号" width="250"></el-table-column>
		<el-table-column label="变更">
			<template #default="scope">
				<el-button size="small" v-on:click="handleEdit(scope.row)">
					变更
				</el-button>
			</template>
		</el-table-column>
		<el-table-column label="删除">
			<template #default="scope">
				<el-button size="small" v-on:click="handleDelete(scope.row.ffkId)">
					删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>

	<el-dialog v-model="dialogVisibleUp"
			   title="II级机构变更"
			   width="800">
		<span>
			<el-form ref="uruleFormRefUp" :model="uformUp" :rules="urules" label-width="auto" style="max-width: 750px">
				<el-form-item label="I级机构编号" prop="firstKindId">
					<el-input v-model="uformUp.firstKindId" />
				</el-form-item>
				<el-form-item label="I级机构名称" prop="firstKindName">
					<el-input v-model="uformUp.firstKindName" />
				</el-form-item>
				<el-form-item label="薪酬发放责任人编号" prop="firstKindSalaryId">
					<el-input type="textarea" rows="5" v-model="uformUp.firstKindSalaryId" />
				</el-form-item>
				<el-form-item label="销售责任人编号" prop="firstKindSaleId">
					<el-input type="textarea" rows="5" v-model="uformUp.firstKindSaleId" />
				</el-form-item>
				<el-form-item>
					<el-button v-on:click="dialogVisibleUp = false">取消</el-button>
					<el-button type="primary" v-on:click="upOk()">
						变更
					</el-button>
				</el-form-item>
			</el-form>

		</span>

	</el-dialog>

	<el-dialog v-model="dialogVisibleAdd"
			   title="II级机构添加"
			   width="800">
		<span>
			<el-form ref="uruleFormRefAdd" :model="uformAdd" :rules="urules" label-width="auto" style="max-width: 750px">
				<el-form-item label="I级机构编号" prop="firstKindId">
					<el-input v-model="uformAdd.firstKindId" />
				</el-form-item>
				<el-form-item label="I级机构名称" prop="firstKindName">
					<el-input v-model="uformAdd.firstKindName" />
				</el-form-item>
				<el-form-item label="薪酬发放责任人编号" prop="firstKindSalaryId">
					<el-input type="textarea" rows="5" v-model="uformAdd.firstKindSalaryId" />
				</el-form-item>
				<el-form-item label="销售责任人编号" prop="firstKindSaleId">
					<el-input type="textarea" rows="5" v-model="uformAdd.firstKindSaleId" />
				</el-form-item>
				<el-form-item>
					<el-button v-on:click="dialogVisibleAdd = false">取消</el-button>
					<el-button type="primary" v-on:click="AddOk()">
						变更
					</el-button>
				</el-form-item>
			</el-form>

		</span>

	</el-dialog>
	
</div>
</body>
<script type="text/javascript">
	const { createApp, ref, reactive, computed, watchEffect } = Vue;
	var app = createApp({
		setup() {
			var tableData = ref([])
			let dialogVisibleUp = ref(false);
			const uruleFormRefUp = ref(null);
			let dialogVisibleAdd = ref(false);
			const uruleFormRefAdd = ref(null);

			const uformUp = reactive({
				ffkId:'',
				firstKindName: '',
				firstKindId: '',
				firstKindSalaryId: '',
				firstKindSaleId: '',
				
			})
			const uformAdd = reactive({
				firstKindName: '',
				firstKindId: '',
				firstKindSalaryId: '',
				firstKindSaleId: '',

			})

			function Fill() {
				axios.get('/CFFK/GetCFFK')
				.then(res => {
					console.info(res.data);
					tableData.value = res.data;
				})
			}
			Fill();

			function handleEdit(row) {
				console.info(row)
				dialogVisibleUp.value = true;
				uformUp.ffkId = row.ffkId;
				uformUp.firstKindName = row.firstKindName;
				uformUp.firstKindId = row.firstKindId;
				uformUp.firstKindSalaryId = row.firstKindSalaryId;
				uformUp.firstKindSaleId = row.firstKindSaleId;
				
			}

			function upOk() {
				uruleFormRefUp.value.validate((valid, fields) => {
					if (valid) {
						axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
						axios.put('/CFFK/UpdateCFFK', {
							ffkId: uformUp.ffkId,
							firstKindName: uformUp.firstKindName,
							firstKindId: uformUp.firstKindId,
							firstKindSalaryId: uformUp.firstKindSalaryId,
							firstKindSaleId: uformUp.firstKindSaleId,
						}).then(res => {
							if (res.data) {
								console.info(res.data)
								alert("修改成功")
								Fill();
								dialogVisibleUp.value = false;
							}
						}).catch(err => {
							console.log(err);
						})
					} else {
						console.log('error submit!', fields)
					}
				})

			}
			function handleDelete(ffkId) {
				console.info(ffkId)
				if (confirm("确定删除")) {
					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/CFFK/DeleteCFFK', {
						id: ffkId
					}).then(res => {
						if (res.data) {
							Fill();
						}
					}).catch(err => {
						console.log(err);
					})
				}

			}
			function Add(){
				dialogVisibleAdd.value = true;
			}
			function AddOk() {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.put('/CFFK/AddCFFK', {
					firstKindName: uformAdd.firstKindName,
					firstKindId: uformAdd.firstKindId,
					firstKindSalaryId: uformAdd.firstKindSalaryId,
					firstKindSaleId: uformAdd.firstKindSaleId,
				}).then(res => {
					if (res.data) {
						console.info(res.data)
						alert("添加成功")
						Fill();
						dialogVisibleAdd.value = false;
					}
				}).catch(err => {
					console.log(err);
				})
			}
			return {
				tableData,
				dialogVisibleUp,
				uruleFormRefUp,
				dialogVisibleAdd,
				uruleFormRefAdd,
				uformUp,
				uformAdd,
				handleEdit,
				upOk,
				handleDelete,
				Add,
				AddOk
			}
		}
	})
	app.use(ElementPlus);
	app.mount("#app");
</script>

<style type="text/css">
	body{
		background-color: #FFFFBB;
		border: 1px solid #FFDB6F;
		display: block;
		margin: 8px;
	}
	el-table{
		background-color: #FFFFBB;
	}
	

</style>

